<script type="text/javascript">
 $(function(){ 
	var $panel = $.CurrentNavtab;
	var $t     = $('#wmenutreeid');
	var op     = $t.data();
	//添加删除按钮INIT
	var add    = op.addHoverDom ? null : 'edit';
	var remove = op.removeHoverDom ? null : 'edit';
	var onremove = op.onRemove ? '' : 'M_NodeRemove';
	$t.data('addHoverDom', add).data('removeHoverDom', remove).data("onRemove",onremove);
	//拖动INIT
	var edit   = op.editEnable ? true : true,
        bDrag  = op.beforeDrag ? '' : 'M_BeforeNodeDrag',
        bDrop  = op.beforeDrop ? '' : 'M_BeforeNodeDrop',
        onDrop = op.onDrop ? '' : 'M_NodeDrop';
            
    $t.data('editEnable', edit).data('beforeDrag', bDrag).data('beforeDrop', bDrop).data('onDrop', onDrop);
}); 
//单击事件
function ZtreeClick(event, treeId, treeNode) {
	if (treeNode.id==-1) {//根节点不能被编辑
		return false;
	}
    var $detail = $('#wtreedetailid');
    if ($detail.attr('tid') == treeNode.tId){
    	return;
    }
	if (treeNode.text) {
		$('#text').val(treeNode.text);
	}else{
		$('#text').val('');
	}
	if (treeNode.eurl) {
		$('#eurl').val(treeNode.eurl);
	}else{
		$('#eurl').val('');
	}
	if (treeNode.pid) {
		$('#pid').val(treeNode.pid);
	}else{
		$('#pid').val('');
	}
	if (treeNode.url) {
		$('#url').val(treeNode.url);
	} else {
		$('#url').val('');
	}
	if (treeNode.id) {
		$('#id').val(treeNode.id);
	} else {
		$('#id').val('');
	}
	if (treeNode.type) {
		$('#type').selectpicker('val',treeNode.type);
	} else {
		$('#type').val('');
	}
	if (treeNode.key) {
		$('#key').val(treeNode.key);
	} else {
		$('#key').val('');
	}
	$('#tId').val(treeNode.tId);
	$detail.attr('tid', treeNode.tId);
    $detail.show();
    $('#wtreedetailroleid').show();
}
//保存属性
function M_Ts_Wmenu() {
	var zTree  = $.fn.zTree.getZTreeObj("wmenutreeid");
	var tId = $('#tId').val();
	var text   = $('#text').val();
	var url    = $('#url').val();
	var id	 = $('#id').val();
	var pid	 = $('#pid').val();
	var type = $('#type').val();
	var eurl = $('#eurl').val();
	var key = $('#key').val();
	if ($.trim(text).length == 0) {
		alertMsg.error('菜单名称不能为空！');
		return;
	}
	var upNode = zTree.getSelectedNodes()[0];
	
	if (!upNode) {
		alertMsg.error('未选中任何菜单！');
        return;
	}
	upNode.name   = text;
	upNode.text   = text;
	upNode.url   = url;
	upNode.eurl   = eurl;
	upNode.id 	= id;
	upNode.pid 	= pid;
	upNode.type = type;
	upNode.key  = key;
	$.ajax({
		url: "${ctx}/wechatmenu/save",
		type: "POST",
		data:$('#wmenu_form').serialize(),
		success: function(data) {
			if (data.success){
				upNode.id = data.obj.id;
				upNode.pid 	= data.obj.pid;
				upNode.type = data.obj.type;
				upNode.key = key;
				zTree.updateNode(upNode);	
			}else{
				
			}
		}
	});
	return false;
}
//监听拖拽事件
function M_BeforeNodeDrag(treeId, treeNodes) {
    return true
}
function M_BeforeNodeDrop(treeId, treeNodes, targetNode, moveType, isCopy) {
    /*禁止插入层级为2的节点*/
    if (moveType == 'inner' && targetNode.level == 2) {
    	$("#wmenutreeid").alertmsg('info', '拖拽失败。原因：目录菜单只能有3层！');
        return false
    }
    /*禁止插入剩余层级不足的子节点*/
    if (moveType == 'inner' && treeNodes[0].isParent) {
        var molevel = 2 - targetNode.level //剩余层级
        var maxlevel = 1
        var zTree = $.fn.zTree.getZTreeObj("ztree1")
        var nodes = zTree.transformToArray(treeNodes)
        var level = nodes[0].level
        
        for (var i = 1; i < nodes.length; i++) {
            if (nodes[i].level == (level + 1)) {
                maxlevel++
                level++
            }
        }
        if (maxlevel > molevel) {
        	$("#wmenutreeid").alertmsg('info', '拖拽失败。原因：目录菜单只能有3层！');
            return false
        }
    }
    return true
}
//拖拽结束事件
function M_NodeDrop(event, treeId, treeNodes, targetNode, moveType, isCopy) {
    
}
//删除结束事件
var menudeleteids = [];
function M_NodeRemove(event, treeId, treeNode) {
	if(treeNode.id!=null&&treeNode.id!=""){
		$.ajax({
			url: "${ctx}/wechatmenu/del",
			type: "POST",
			data:{
				id:treeNode.id
			},
			success: function(data) {
				if (data.success){
					menudeleteids.push(treeNode.id);
				}else{
					
				}
			}
		});		
	}
}

//保存菜单
function savemenu(){
	var zTree = $.fn.zTree.getZTreeObj("wmenutreeid")
    var menus = zTree.getNodes();
	//alert(JSON.stringify(menus[0]));
	
	$("#wmenutreeid").bjuiajax('doAjax', {url:"${ctx}/wechatmenu/saveTree", reload:true,confirmMsg:"是否确定需要保存？",data:{'wmenus':JSON.stringify(menus[0])}});
}
//生成微信菜单
function createmenu(){
	$("#wmenutreeid").bjuiajax('doAjax', {url:"${ctx}/wechatapi/createMenu", reload:true,confirmMsg:"是否确定需要生成？"});
}
</script>
<div class="bjui-pageContent">
    <!-- <div class="pageFormContent" data-layout-h="0"> -->
        <div style="float:left; margin:5px 5px 0;width:300px;">
            <fieldset style="top:15px;bottom:0px;overflow:auto;position: absolute;">
                <legend>树型菜单</legend>
                <button class="btn btn-green" onclick="savemenu();">保存更新</button>
                <button class="btn btn-green" onclick="createmenu();">生成微信菜单</button>
                <div class="alert alert-info form-inline"><i class="fa fa-info-circle"></i> 可拖拽菜单节点</div>
                <div class="clearfix">
                    <div style="float:left; width:300px; overflow:auto;">
                        <ul id="wmenutreeid" class="ztree" data-toggle="ztree" data-max-add-level="2" data-expand-all="true" data-expand-level="2" data-on-click="ZtreeClick">
                            <!-- <li data-id="1" data-pid="0">表单元素</li>
                            <li data-id="10" data-pid="1" data-url="form-button.html" data-tabid="form-button">按钮</li> -->
                            <li data-id="-1" data-faicon="home">菜单</li>
                            <%
                               for (smenu in wmenus){
                            %>
                            	<li data-id="${smenu.id!}" data-pid="${smenu.pid!}" data-eurl="${smenu.eurl!}" data-text="${smenu.text!}" data-type="${smenu.type!}" data-url="${smenu.url!}" data-key="${smenu.key!}">${smenu.text!}</li>
                            <%
                               if (smenu.lw != null && smenu.lw.~size > 0){
                                for (menu in smenu.lw){
                            %>
                                <li data-id="${menu.id!}" data-pid="${menu.pid!}" data-eurl="${menu.eurl!}" data-text="${menu.text!}" data-type="${menu.type!}" data-url="${menu.url!}" data-key="${menu.key!}">${menu.text!}</li>
                            <%
                               }
                              }
                            %>
                            <%
                               }
                            %>
                        </ul>
                    </div>
                </div>
            </fieldset>
        </div>
        <!-- 明细编辑START -->
        <div id="wtreedetailid" style="display:none; margin-left:330px; margin-top:5px;margin-right:5px;height:135px;">
        	<fieldset>
            <!-- <div class="bs-example" data-content="详细信息"> -->
            <legend>菜单详细信息</legend>
            <form action="${ctx}/wechatmenu/save" id="wmenu_form" method="post">
            	<div class="form-group">
                    <label for="type" class="control-label x85">菜单类型：</label>
                    <input type="hidden" id="id" name="weixinMenu.id" value=""/>
                    <input type="hidden" id="tId"/>
                    <input type="hidden" id="pid" name="weixinMenu.pid" value=""/>
                    <select class="form-control" name="weixinMenu.type"  id="type" data-toggle="selectpicker" data-rule="required">
                      	<option value="click">click</option>
						<option value="view">view</option>
                    </select>
                    <label for="key" class="control-label x85">key值：</label>
                    <input type="text" class="form-control" name="weixinMenu.key" value="" id="key" size="15" placeholder="" />
                </div>
                <div class="form-group">
                	<label for="text" class="control-label x85">菜单名称：</label>
                    <input type="text" class="form-control validate[required] required" value="" name="weixinMenu.text" id="text" size="30" placeholder="" />
                </div>
                <div class="form-group">
                    <label for="url" class="control-label x85">url：</label>
                    <input type="text" class="form-control" name="weixinMenu.url" id="url" value="" size="30" placeholder="" />
                </div>
                <div class="form-group">
                    <label for="eurl" class="control-label x85">外部链接：</label>
                    <input type="text" class="form-control" name="weixinMenu.eurl" id="eurl" value="" size="30" placeholder="" />
                    <button type="button" class="btn btn-green" onclick="M_Ts_Wmenu();">确认修改</button>
                </div>
                </form>
                <!-- <div class="form-group" style="padding-top:8px; border-top:1px #DDD solid;">
                    <label class="control-label x85"></label>
                    
                </div> -->
            <!-- </div> -->
            </fieldset>
        </div>
        <!-- 明细编辑END -->
        <!-- 角色权限START -->
        <div id="wtreedetailroleid" style="display:none; margin-left:330px;">
        	<fieldset style="top:180px;bottom:0px;left:340px;right:15px;overflow:auto;position: absolute;">
            <!-- <div class="bs-example" data-content="详细信息"> -->
            <legend>菜单说明</legend>
                <div class="alert alert-success" role="alert" style="margin:0 0 5px; padding:5px 15px;">
                    <strong>详细说明:</strong>
                    <br><span class="label label-default">view：</span>  当选择view时,url地址必填
                    <br><span class="label label-default">click：</span>  当选择key时,key值必填
                    <br><span class="label label-default">外部链接：</span>  菜单跳转到外部应用的链接
                </div>
            </fieldset>
        </div>
        <!-- 角色权限END -->
    <!-- </div> -->
</div>